<template>
  <div id="index">
    <div class="header">
      <span class="_icon _i1" @click="goTo('/project')"><i class="el-icon-arrow-left"></i></span>
      <span class="_txt" style="color:#fff">项目介绍</span>
      <span class="_icon _i2" @click="goTo('/setting')">
        <i class="el-icon-more-outline"></i>
      </span>
    </div>
    <div class="_main">
      <div class="intro">
        <div class="_box">
          <span class="_txt _name"></span>
          <div class="_img">
            <img src="https://hbimg.huabanimg.com/43881a97cac31865184fd949c092fa6c8ddbbb82947a5-jDf09D_fw658" alt="info">
          </div>
          <span class="_txt _site"></span>
          <span class="_txt _short"></span>
          <span class="_txt _grade"></span>
          <span class="_txt _leader"></span>
          <span class="_txt _team"></span>
          <span class="_txt _tag"></span>
        </div>
      </div>
      <div class="detail">
        <div class="_box">
          <div class="_img"></div>
          <div class="_telIntro"></div>
          <span class="_button" @click="toShow(1)">更多...</span>
        </div>
      </div>
      <div class="flow_fund">
        <div class="_box"></div>
      </div>
      <div class="contract">
        <div class="_box"></div>
      </div>
      <div style="
            width:100%;
            height:20%;
      "></div>
    </div>
    <div class="coverPage" v-show="showCover===true">
      <div class="_box">
        <span class="_icon" @click="toShow(0)">
          <i class="el-icon-close"></i>
        </span>
        <div class="_txtarea _img"></div>
        <div class="_txtarea _telIntro"></div>
        <div class="_txtarea _stateIntro"></div>
        <div class="_txtarea _otherIntro"></div>
      </div>
    </div>
    
    <div class="footer">
        <span class="_txt"></span>
        <div class="_collect" @click="toAddCollect()">
          <span class="_icon _i1">
            <i class="el-icon-star-off"></i>
          </span>
          <span class="_icon _i2" v-show="showColl===true">
            <i class="el-icon-star-on"></i>
          </span>
          <span class="_savetxt">关注</span>
        </div>
        <span class="_button" @click="goTo('/guide-fund')">开始合作</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showCover:false,
      showColl:false,
    }
  },
  methods:{
    goTo:function(Path){
      this.$router.replace(Path);
    },
    toShow(ob){
      if(ob===1){
        this.showCover = true
      }else this.showCover = false 
    },
    toAddCollect:function(){
      if(this.showColl===false){
        this.showColl = true;
      }else this.showColl = false;
    }

  }
}
</script>


<style scoped>
/*全局样式 */
  div,span{
    display: block;
  }
  span{
    text-align: center;
    display: block;
  }
  #index{
    width: 100%;
    height: 100%;
  }
  .header{
    width: 100%;
    height: 50px;
    background: #FF6600;
    position: fixed;
    z-index: 100;
  }
  ._main{
    width:100%;
    height: 100%;
    position:absolute;
    top: 50px;
  }
  .footer{
    width: 100%;
    height: 60px;
    background: rgb(245, 244, 244);
    position: fixed;
    z-index: 100;
    bottom: 0;
  }
  .intro{
    width: 100%;
    position: relative;
    height: 200px;
  }
  .detail{
    width: 100%;
    height: 300px;
    position: relative;
  }
  .flow_fund{
    width: 100%;
    height: 100px;
    position: relative;
  }
  .contract{
    width: 100%;
    height: 200px;
    position: relative;
  }
  ._box{
    overflow: hidden;
    position: relative;
    background: #ccc;
    width: 95%;
    height: 100%;
    margin: 10px auto;
    border-radius: 10px;
  }
/*header */
  .header ._txt{
    height:50px;
    text-align:center;
    font-weight: 600;
    font-size: 20px;
    width: 50%;
    position: absolute;
    left:25%;
    line-height: 50px;
  }
  .header ._icon{
    height: 50px;
    width: 50px;
    position: absolute;
    right: 0;
    font-size:35px; 
    color:#666;
    line-height: 50px;
    text-align:center;
  }
  .header ._i1{
    font-size: 30px;
    left:0;
  }
/*footer*/
  .footer ._txt{
    position:absolute;
    background: #ccc;
    width: 20%;
    height: 90%;
    top:5%;
    left: 2%;
  }
  .footer ._collect{
    border:#ccc 1px solid;
    width: 90px;
    height: 42px; 
    background: #fff;
    border-radius: 40px;
    position:absolute;
    top:15%;
    left: 25%;
    overflow: hidden;
  }
  .footer ._collect ._savetxt{
    width: 50%;
    position:absolute;
    font-size: 18px;
    height: 90%;
    top:5%;
    right: 7px;
    line-height: 38px;
    font-weight: 600;
    color: #999;
  }
  .footer ._icon{
    width: 42px;
    height: 42px;
    font-size:30px;
    line-height: 42px;
    position:absolute; 

  }
  .footer ._i1{
    color: #999;
  }
  .footer ._i2{
    color: #ff3300;
  }
  .footer ._button{
    position: absolute;
    width: 40%;
    height: 70%;
    background: linear-gradient(to right,#ff6600    ,#ff3300);
    border-radius: 42px;
    top:15%;
    right: 2%;
    line-height: 42px;
    text-align: center;
    color: #fff;
    font-size:18px;
    font-weight: 600; 
    font-family:Century Gothic;
  }
/*intro部分样式*/
  .intro ._txt{
    font-size:14px;
    position:absolute; 
    background: #e4e4e4;
  }
  .intro ._name{
    width:60%;
    height: 20%;
    background: #e4e4e4;
    top: 5px;
    left: 5px;
  }
  .intro ._img{
    width:50%;
    height: 60%;
    border-radius:10px;
    overflow: hidden;
    margin: 5px;
    position: absolute; 
    bottom: 0;
  }
  .intro ._img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .intro ._site{
    width: 60%;
    height: 10%;
    background: #e4e4e4;
    top:50px;
    left: 5px;
  }
  .intro ._grade{
    width:  25%;
    height: 35%;
    top:5px;
    right: 20px;
  }
  .intro ._short{
    width: 45%;
    height: 20%;
    top:40%;
    right: 5px;
  }
  .intro ._leader{
    width: 45%;
    height: 10%;
    top:55%;
    right: 5px;
  }
  .intro ._team{
    width: 45%;
    height: 10%;
    top:70%;
    right: 5px;
  }
  .intro ._tag{
    width: 45%;
    height: 10%;
    top:85%;
    right: 5px;
  }
/*detail部分样式*/
  .detail._box{
    overflow: hidden;
  }
  .detail ._txt{
    font-size:14px;
    position:absolute; 
    background: #e4e4e4;
  }
  .detail ._img{
    width: 90%;
    margin: 5px 5%;
    height: 60%;
    background: #e4e4e4;
    position: absolute;
  }
  .detail ._telIntro{
    width: 90%;
    margin: 5px 5%;
    height: 50%;
    background: #e4e4e4;
    position: absolute;
    top:65%;
  }
  .detail ._button{
    width: 100%;
    height: 15%;
    position:absolute;
    z-index: 200;
    background:rgba(0,0,0,0.2);
    bottom:0;
    text-align: center;
    line-height: 45px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-shadow: 0 0 2px black;
  }
/*coverPage */
  .coverPage {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    z-index: 500;
    background: rgba(0,0,0,0.3);

  }
  .coverPage ._box{
    position: absolute;;
    width: 80%;
    height: 90%;
    top:5%;
    left:10%;
    background: #fff;
    overflow: auto;
  }
  .coverPage ._icon{
    font-size: 20px;
    color: #666;
    width: 40px;
    height: 40px;
    position: fixed;
    right: 10%;
    line-height: 40px;
    z-index: 900;
  }
  .coverPage ._txtarea{
    width: 96%;
    position: relative;
    margin: 5px auto;
    border-radius: 10px;
    background: #ccc;
  }
  .coverPage ._img{
    min-height:300px ;
  }
  .coverPage ._telIntro{
    min-height:200px ;
  }
  .coverPage ._stateIntro{
    min-height: 200px;
  }
  .coverPage ._otherIntro{
    min-height: 200px;
  }
</style>
